<template>
    <el-dialog
      draggable
      width="60%"
      :title="`更新${title}`"
      @close="handleClose"
      :close-on-click-modal="false"
      :model-value="dialogVisible"
    >

        <el-form
            v-if="currentRow"
            ref="ruleFormRef"
            :model="currentRow"
            status-icon
            label-width="120px"
            class="demo-ruleForm"
        >
            <el-row :getter="24">
                <el-col :span="12">
                    <el-form-item label="产品编码" prop="goods_number" required>
                        <el-input v-model="currentRow.goods_number" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="产品名称" prop="goods_name" required>
                        <el-input
                            v-model="currentRow.goods_name"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="品牌" prop="brand" required>
                        <el-input
                            disabled
                            v-model="currentRow.brand"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" class="box">
                    <el-form-item :label="label" prop="retail_price" required :rules="[
                        { required: true, message: `${label}不能为空！`, trigger: 'blur' },
                        { pattern: /^[0-9|^\\.]/, message: `${label}不能为负数!` }
                    ]">
                        <el-input-number class="width_100" clearable  v-model="currentRow.retail_price" :precision="2" :step="0.1" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="价格有效期" prop="time" required :rules="[
                        { required: true, message: '价格有效期不能为空！', trigger: 'blur' },
                    ]">
                        <el-date-picker
                            clearable
                            v-model="currentRow.time"
                            type="datetimerange"
                            format="YYYY-MM-DD HH:mm:ss"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <div class="flex_center" style="padding-top: 20px;">
                        <el-button size="small" @click="handleClose">取消</el-button>
                        <el-button size="small" type="primary" @click="submitForm(ruleFormRef)"
                            >提交</el-button
                        >
                    </div>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
  </template>
  
<script lang="ts" setup>
import { ElMessage, FormInstance, dayjs } from 'element-plus';
import { productUpdatePrice } from '~/src/api/dms/product';

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    currentRow: {
        type: Object,
        default: null
    },
    type: {
        type: String,
        default: '1'
    }
})
/**
 * @var
 */
const ruleFormRef = ref()

const label = computed(() => {
    return props.type == '1' ? '标准零售价' : '底价'
})
const title = computed(() => {
    return props.type == '1' ? '标准零售价' : '底价'
})

/**
 * @method
 */
const emit = defineEmits(['handleClose', 'refresh'])
const handleClose = () => {
    emit('handleClose', false)
}
// 提交
const submitForm = (formEl: FormInstance | undefined) => {
    if (!props.currentRow.time) {
        ElMessage({
            message: '价格有效期不能为空！',
            type: 'success',
        })
        return
    }
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            productUpdatePrice({
                id: props.currentRow.id,
                type: props.type,
                retail_price: props.currentRow.retail_price,
                validity_start: dayjs(props.currentRow.time[0]).format('YYYY-MM-DD HH:mm:ss'),
                validity_end: dayjs(props.currentRow.time[1]).format('YYYY-MM-DD HH:mm:ss'),
            }).then(async res => {
                ElMessage({
                    message: '更新成功',
                    type: 'success',
                })
                handleClose()
                emit('refresh')
            })

        } else {
            return false
        }
    })
}

/**
 * @周期
 */

</script>

<style lang="scss" scoped></style>
  